<template>
  <div>
    <van-search shape="round" placeholder="小天鹅洗衣机">
      <template #left>
        <div
          id="msCancelBtn"
          class="jd-header-icon-back J_ping"
          style="display: block"
        >
          <span></span>
        </div>
      </template>
    </van-search>
    <div class="wrap">
      <div class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            v-for="item in cateArr"
            :key="item._id"
            :title="item.cate_zh"
          />
        </van-sidebar>
      </div>
      <div class="right">
        <van-grid :column-num="3" :border="false">
          <van-grid-item v-for="item in cache[activeKey]" :key="item._id">
            <template>
              <div class="good">
                <img :src="item.img" alt="" />
                <div v-text="item.name"></div>
              </div>
            </template>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <TabBar />
  </div>
</template>
<script>
import { TabBar } from "@/components";
import { mapActions, mapState } from "vuex";
export default {
  name: "Type",
  components: {
    TabBar,
  },
  data() {
    return {
      activeKey: 0,
      cateArr: [],
      goodArr: [],
    };
  },
  computed: {
    ...mapState("good", ["cache"]),
    payload() {
      const idx = this.activeKey;
      console.log({ idx, cate: this.cateArr[idx].cate });
      return { idx, cate: this.cateArr[idx].cate };
    },
  },
  watch: {
    activeKey() {
      if (!this.cache[this.activeKey]) this.getList(this.payload);
    },
  },
  async created() {
    const res = await this.$api.fetchAllCate();
    this.cateArr = res.data.list;
    console.log(this.cateArr);
    this.getList(this.payload);
  },
  methods: {
    ...mapActions("good", ["getList"]),
  },
};
</script>
<style lang="scss" scoped>
.jd-header-icon-back {
  width: 0.533333rem;
  height: 0.533333rem;
}
.jd-header-icon-back span {
  margin: 12px 0 0 10px;
  width: 20px;
  height: 20px;
  display: block;
  background: url()
    no-repeat;
  background-size: 100% 100%;
}
.wrap {
  position: absolute;
  bottom: 0.665rem;
  right: 0;
  left: 0;
  top: .8rem;
  .left {
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    width: 1.135rem;
    overflow-y: scroll;
    // css 去除滚动条
  }
  .right {
    position: absolute;
    bottom: 0;
    left: 1.135rem;
    top: 0;
    right: 0;
    background-color: white;
    overflow-y: scroll;
    padding: 0.135rem;
    // css 去除滚动条
    .good {
      font-size: 0.18rem;
      text-align: center;
      img {
        display: inline-block;
        width: 0.935rem;
        height: 0.935rem;
      }
    }
  }
}
.van-sidebar {
  width: 100%;
  .van-sidebar-item {
    height: 0.615rem;
    line-height: 0.12rem;
    border: none;
    .van-sidebar-item__text {
      height: 0.615rem;
      line-height: 0.615rem;
    }
  }
  .van-sidebar-item--select::before {
    display: none;
  }
  .van-sidebar-item--select {
    color: #e93b3d;
  }
}
</style>
